<template>
    <div id="myapp">
        <div id="search_Box">
            <span>PO号：</span>
            <Input type="text" v-model="value1" size="small" placeholder="small size" style="width: 200px"></Input>
            <span>PO名称：</span>
            <Input type="text" v-model="value2" size="small" placeholder="small size" style="width: 200px"></Input>
            <Button type="primary" icon="ios-search" @click="search">Search</Button>
            <!--<button @click="search">555</button>-->
        </div>
        <tree-grid
            :items='data'
            :columns='columns'
            @on-row-click='rowClick'
            @on-selection-change='selectionClick'
            @on-sort-change='sortClick'
        ></tree-grid>
        <Page
            show-elevator show-sizer

            :page-size-opts="pageSizeOpts"
            :total="totalPage"
            @on-change="turnPage"
            @on-page-size-change="sendPageSize"
        ></Page>

    </div>
</template>
<script>
    import TreeGrid from '../../components/TreeGrid'
    import {Input, Button, Page} from 'iview'
    import qs from 'qs'

    export default {
        name: "expandTable",
        components: {
            TreeGrid,
            Input,
            Button,
            Page
        },
        data() {
            return {
                pageSizeOpts: [10, 15, 20],
                page:'1',
                pageSize:'10',
                totalPage:'',
                value1: '',
                value2: '',
                message: '',
                columns: [
                    {
                        title: '#',
                        key: 'num',
                        width: '30',
                    },
                    {
                    title: 'PO号',
                    key: 'po',
                    sortable: true,
                    width: '150',
                }, {
                    title: '名称',
                    key: 'name',
                    width: '150',
                }, {
                    title: '版本',
                    key: 'version',
                    width: '150',
                }, {
                    title: '时间',
                    key: 'date',
                    width: '150',
                }, {
                    title: '健康度',
                    key: 'health',
                    width: '150',
                }, {
                    title: '指标A',
                    key: 'remark',
                    width: '150',
                }, {
                    title: '操作',
                    type: 'action',
                    width: '150',
                    actions: [{
                        type: 'primary',
                        text: '详情',
                    }, {
                        type: 'error',
                        text: '删除'
                    }]
                }],
                data: []
                // data: [{
                //     id: '1',
                //     code: '201801023351',
                //     name: '网络安全',
                //     version: 'P4',
                //     date: '2017-10-25',
                //     remark: '1.0',
                //     _checked: true
                // }, {
                //     id: '2',
                //     code: '201801023352',
                //     name: '网络安全',
                //     version: 'P3',
                //     date: '2017-10-25',
                //     remark: '2.1',
                //     children: [{
                //         id: '01',
                //         code: '201801023352',
                //         name: '服务A',
                //         version: 'P1',
                //         date: '2017-10-25',
                //         remark: '0.75',
                //         children: [
                //             {
                //                 id: '003',
                //                 code: '201801023352',
                //                 name: '微服务A',
                //                 version: 'P2',
                //                 date: '2017-10-25',
                //                 remark: '0.9'
                //             }]
                //     }, {
                //         id: '02',
                //         code: '201801023352',
                //         name: '服务B',
                //         version: 'P5',
                //         date: '2017-10-25',
                //         remark: '1',
                //     }]
                // }, {
                //     id: '3',
                //     code: '201801023353',
                //     name: '测试数据3',
                //     version: 'P2',
                //     date: '2017-10-25',
                //     remark: '1.1'
                // }, {
                //     id: '4',
                //     code: '201801023354',
                //     name: '测试数据4',
                //     version: 'P4',
                //     date: '2017-10-25',
                //     remark: '1.0'
                // }]
            }
        },
        created() {
            let postData = qs.stringify({
                page: this.page,
                pageSize: this.pageSize
            });
            let _this = this;
            this.$axios.post('/po/queryProjectInfos',postData).then((res)=> {
                console.log(res.data.data.totalPage);
                _this.data = res.data.data.dataList;
                console.log(_this.pageSize)
                _this.totalPage=(res.data.data.totalPage)*(_this.pageSize)
            }).catch( (err)=> {
                console.log(err)
            })
        },
        methods: {
            rowClick(data, index, event) {
                console.log('当前行数据:' + data);
                console.log('点击行号:' + index);
                console.log('点击事件:' + event)
            },
            selectionClick(arr) {
                console.log('选中数据id数组:' + arr)
            },
            sortClick(key, type) {
                console.log('排序字段:' + key);
                console.log('排序规则:' + type)
            },
            // 发起axios请求，获取数据的公共请求函数
            // getDataAxios(){
            //     let _this = this;
            //     this.$axios.post('/po/queryProjectInfos',postData)
            //         .then(function (res) {
            //             console.log(res)
            //             _this.data = res.data.data.dataList
            //         }).catch(function (err) {
            //         console.log(err)
            //     })
            // },
            // 点击搜索进行模糊查询
            search() {
                let postData = qs.stringify({
                    po: this.value1,
                    name: this.value2,
                    page: this.page,
                    pageSize: this.pageSize
                });
                let _this = this;
                this.$axios.post('/po/queryProjectInfos',postData).then((res)=> {
                    _this.data = res.data.data.dataList;
                    _this.totalPage=(res.data.data.totalPage)*(_this.pageSize)
                }).catch( (err)=> {
                    console.log(err)
                })
            },
            // 点击翻页按钮
            turnPage(page) {
                let postData = qs.stringify({
                    page: page,
                    pageSize: this.pageSize
                });
                let _this = this;
                this.$axios.post('/po/queryProjectInfos',postData).then((res)=> {
                    _this.data = res.data.data.dataList
                }).catch( (err)=> {
                    console.log(err)
                })
            },

            sendPageSize(pageSize) {
                console.log(pageSize);
                let postData = qs.stringify({
                    page: this.page,
                    pageSize:pageSize
                });
                console.log(postData);
                let _this = this;
                this.$axios.post('/po/queryProjectInfos',postData).then((res)=> {
                    console.log(res.data.data.totalPage)
                    _this.data = res.data.data.dataList
                    _this.totalPage=(res.data.data.totalPage)*(_this.pageSize)
                }).catch( (err)=> {
                    console.log(err)
                })
            }

        }
    }
</script>
<style scoped>
    #myapp {
        width: 95%;
        margin: 30px auto;
        border: 1px solid red
    }

    /*搜索一栏的样式*/
    #search_Box {
        margin: 20px 0;
    }

    /*input {*/
    /*margin-right: 50px !important;;*/
    /*}*/
    #myapp .ivu-page {
        position: absolute;
        top: 80%;
        left: 45%;
        transform: translateX(-50%);
        border: 1px solid red !important;
    }

    /*#hl-tree-table .child-tr td{*/
    /*background-color: #00B7FF;*/
    /*}*/
</style>

